<template>
  <Page name="编辑银行卡">
    <div class="edit-btn"  @click="getPop()">删除</div>
    <div class="add-card">
      <ul>
        <li >
          <span>姓名</span>
          <span>{{bankInfo.user_name}}</span>
        </li>
        <li>
          <span>银行</span>
          <span>{{bankInfo.bank_name}}</span>
        </li>
        <li>
          <span>卡号</span>
          <span>{{bankInfo.bank_card_no }}</span>
        </li>
      </ul>
    </div>
    <ui-popup :status="popup.status" @close="popupClose">
        <div class="popup-common exit-pop">
            <div class="exit-content">
                <p> {{ popInfo.title }} </p>
            </div>
            <div class="footer">
                <a href="javascript:;" @click="popupClose">取消</a>
                <a href="javascript:;" @click="confirm(bankInfo.id)">确定</a>
            </div>
        </div>
    </ui-popup>
  </Page>
</template>

<script>
import Page from '~/components/page';
import popup from "~/components/common/popup";
export default {
  components: {
    Page,
    [popup.name]: popup,
  },
  data() {
    return {
      formType:{
        name:"",
        bank:"",
        cardNumber:"",
      },
      flag:'disabled',
      popType: '',
      popInfo: {
          title: "",
          content: ""
      },

      popup: {
          status: false
      },
      bankInfo:{}
    };
  },
  mounted(){
    this.bankInfo = JSON.parse(sessionStorage.getItem("bankInfo"));
  },
  methods: {
    getPop () {
      this.popInfo.title = "确定要删除该银行卡？";
      this.popup.status = true;
    },
    popupClose () {
      this.popup.status = false;
    },
    confirm (id) {
      this.popup.status = false;
      this.unbank(id);
    },
    async unbank(id){
        let { data:rs } = await this.$axios.post('?ct=api&ac=unbank',{
          bank_id:id,
        })
        if(rs.code == 0){
          this.$toast("解绑银行卡成功");
          window.history.go(-1);
        }else{
          this.$toast(rs.msg);
        }
     
    },
  }
}
</script>

<style lang="less" scoped>
  .edit-btn{
    position: fixed;
    top:29px;
    right:30px;
    z-index: 999999999;
    font-size:30px;
    color:#f05521;
  }
  .add-card{
    ul{
      padding-left:30px;
      background: #fff;
      margin-top:30px;
      li{
        line-height: 110px;
        border-bottom:1px solid #ededed;
        font-size:32px;
        color:#292929;
        display: flex;
        flex-direction: row;
        align-items: center;
        span{
          margin-right:90px;
        }
        span:last-child{
          flex: 1;
          text-align: right;
          margin-right:30px;
          color:#666;
        }
        &:last-child{
          border-bottom:none;
        }
      }
    }
    div.btn{
      width:688px;
      margin:40px auto;
      display: block;
      .btn{
        border-radius: 8px;
        border:0;
      }
      .btn.disabled{
        opacity: .6;
        cursor: not-allowed;
      }
    }
    
  }
  .popup-common {
      position: absolute;
      left: 11%;
      background: #fff;
      z-index: 999;
      border-radius: 10px;
  }

  .exit-pop {
      top: 40%;
      width: 600px;
      height: 280px;
      .exit-content {
          margin-top: 60px;
          text-align: center;
          p {
              margin-top: 40px;
              font-size: 36px;
              color: #282828;
          }
      }
      .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          display: flex;
          a {
              display: inline-block;
              width: 50%;
              padding: 30px 0;
              text-align: center;
              font-size: 36px;
              border-top: 1px solid #e2e2e2;
              color: #2086f9;
              &:first-child {
                  
                  border-right: 1px solid #e2e2e2;
              }
          }
      }
  }
</style>
